<template>
  <div class="container">
    <div class="body">
      <img src="@/assets/image/activity/divine-voucher.png" />
      <div class="operation">
        <el-button color="#626aef" class="but" v-if="isParticipated === 0" @click="operation(1)">&gt;&gt; 立即参与 &lt;&lt;</el-button>
        <el-button color="#626aef" class="but" v-if="isParticipated === 1" @click="operation(0)">&lt;&lt; 退出活动 &gt;&gt;</el-button>
      </div>
    </div>
    <div class="describe">
      <b>Spark神券活动：</b>
      店铺参与神券活动，授权用户使用神券下单。
      店铺通过参加神卷活动，为购买了平台神券的用户通过优惠券的膨胀为用户提供更大优惠力度，吸引更多用户进行购物消费。
      参与活动的店铺，需要承担用户膨胀部分的金额。
    </div>
  </div>
</template>

<script setup lang="ts">
import ComponentHat from '@/plugins/type'
import { getCurrentInstance, onMounted, ref } from 'vue'
const { $store, $API, $modal } = <ComponentHat>getCurrentInstance().proxy
import { useRoute } from 'vue-router'
const isParticipated = ref(-1) // 0 表示未参与活动，1 表示已参与活动 -1 判断中

onMounted(async () => {
  // 获取当前路由信息
  const route = useRoute()
  const result = await $API.shopActivityInstance.listShopActivityInstanceTypeList(route.query.activityTypeId as string)
  if (result.success) {
    isParticipated.value = result.data.length > 0 ? 1 : 0
  }
})

async function operation(status: number) {
  console.log('点击也')
  const result = await $API.shopActivityInstance.participateOrExitDivineVoucher(status)
  if (result.success) {
    $modal.msgSuccess(status === 1 ? '参与活动成功' : '退出活动成功')
    isParticipated.value = status
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-wrap: nowrap;
  height: 100%;

  .body {
    display: flex;
    justify-content: center;
    padding: 20px;
    flex-grow: 1;
    box-sizing: border-box;
    flex-direction: column;

    > img {
      display: block;
      width: 100%;
    }

    .operation {
      display: flex;
      justify-content: center;
      margin-top: 30px;
      height: 40px;

      .but {
        justify-content: center;
      }
    }
  }

  .describe {
    display: block;
    padding: 12px;
    width: 35%;
    min-width: 25%;
    height: 100%;
    font-size: 14px;
    color: rgb(86 86 86);
    background-color: #fff;
    box-sizing: border-box;
    line-height: 30px;
  }
}
</style>
